<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<style type="text/css">
			
			html{
				/*background:transparent url(base.png) no-repeat ;*/
				height:100%;
			}
			div.slider{
				position:absolute;
				top:150px;
				left:150px;
				width:200px;
				height:200px;
			}
			div.slider div.pannel
				{
				}
			div.slider div.track
				{
				opacity:0.7;
				background:#DDD url(rotate.png) no-repeat;
				width:200px;
				height:200px;
				}

			div.slider div.point 
				{
				border:1px solid black;
				position:absolute;
				top:0;
				left:0;
				}
			div.slider div.point span
				{
				display:block;
				height:20px;
				width:20px;
				margin:-10px;
				background:black;
				opacity:0.1;
				}

		</style>
		<script type="text/javascript">
			function $(o){return document.getElementById(o)};
		
		
			Math.rad=function(angle){return angle*Math.PI/180;}
			Math.ang=function(rad){return rad*180/Math.PI;}
			
			
			var Slider={
				radius:50,
				build:function(o){
					o.step = (s=o.getAttribute("step")) ? parseFloat(s) : 1;
					o.value = (s=o.getAttribute("value")) ? parseFloat(s) : 0;
					o.max = (m=o.getAttribute("max")) ? parseFloat(m) : 100;
					o.min = (n=o.getAttribute("min")) ? parseFloat(n) : 0;
					if(!o.storage)o.storage=o.getElementsByTagName("input")[0];
					var d=o.getElementsByTagName("div");
					if(!o.pannel)o.pannel=d[0];
					if(!o.track)o.track=d[1];
					if(!o.point)o.point=d[2];
				},
				down:function(o,e){
					this.current=o;
					this.build(o);
					this.move(e);
					document.addEventListener("mousemove",Slider.move,false);
					document.addEventListener("mouseup",Slider.up,false);
				},
				move:function(e){
					var o = Slider.current;
					var d = o.point;
					o.angle = Math.ang(Math.atan2(e.clientY-250,e.clientX-250));
					o.x = Math.cos(Math.rad(o.angle));
					o.y = Math.sin(Math.rad(o.angle));
					
					o.track.style.backgroundPosition = -(parseInt(o.angle+180)*200) + "px 0";
					
					d.style.left = (100 + Slider.radius * o.x - d.offsetWidth/2) + "px";
  					d.style.top = (100 + Slider.radius * o.y - d.offsetHeight/2) + "px";
				},
				up:function(){
					document.removeEventListener("mousemove",Slider.move,false);
					document.removeEventListener("mouseup",Slider.up,false);
				}
			}
			
			
			
			
					
		</script>
	</head>
	<body>
		<div id="slider" tabindex="0" class="slider" min="0" max="8" value="4" step="1" 
			onmousedown="Slider.down(this,event)">
			<div class="pannel">
				<div class="track"></div>
				<div class="point" style="left:50%;"><span></span></div>
				<input type="hidden" name="slider" value="4" />
			</div>
		</div>

		<div tabindex="0" angle="60" onmousedown="Slider.down(this,event);">
			<span></span>
		</div>
	</body>
</html>
